<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>绑定样式</title>
    <style>
      .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
      }

      .happy {
        border: 4px solid red;
        background-color: rgba(255, 255, 0, 0.644);
        background: linear-gradient(30deg, yellow, pink, orange, yellow);
      }

      .sad {
        border: 4px dashed rgb(2, 197, 2);
        background-color: gray;
      }

      .normal {
        background-color: skyblue;
      }
    </style>
    <script src="../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <!-- 绑定style样式--对象写法 -->
      <div :class="['basic', mood ? mood : '']" :style="styleObj" @click="changeMood">{{name}}</div>
      <br /><br />
      <!-- 绑定style样式--数组写法 -->
      <div class="basic" :style="styleArr">{{name}}</div>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#root",
        data() {
          return {
            name: "尚硅谷",
						mood: '',
            styleObj: {
              fontSize: "40px",
              color: "red",
            },
            styleArr: [
              {
                fontSize: "40px",
                color: "blue",
              },
              {
                backgroundColor: "gray",
              },
            ],
          };
        },
        methods: {
          changeMood() {
            const arr = ["happy", "sad", "normal"];
            const index = Math.floor(Math.random() * 3);
            this.mood = arr[index];
          },
        },
      });
    </script>
  </body>
</html>
<!-- 
	绑定样式:
		2. style样式
			:style="{fontSize: xxx}"其中xxx是动态值.
			:style="[a,b]"其中a、b是样式对象.
-->
